<template>
  <div class="wrapper">
    <common-scroll :data="searchResult"
                   ref="scroll"
                   class="scroll">
      <div class="container">
        <ul class="shop-list"
            v-if="searchResult.length > 0">
          <li class="shop-item"
              v-for="item of searchResult"
              :key="item.id"
              @click="handleDetail(item)">
            <common-product :shopInfo="item"
                            border-bottom-1px></common-product>
          </li>
        </ul>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import CommonProduct from 'common/product/Product'
import { mapState } from 'vuex'
export default {
  name: 'ResultRecommend',
  components: {
    CommonScroll,
    CommonProduct
  },
  data () {
    return {
      searchResult: []
    }
  },
  computed: {
    ...mapState(['searchParams'])
  },
  methods: {
    getSearch (value) {
      console.log(this.searchParams)
      let locationData = JSON.parse(this.$localStorage.get('locationData'))
      if (locationData != null) {
        locationData = Object.assign({}, locationData, { cate_id: this.searchParams.id, shop_name: this.searchParams.name, order: 'looks' })
        this.$api.search.getSearchResult({ ...locationData })
          .then(this.getSearchSucc)
          .catch((e) => {
            console.log(e)
          })
      }
    },
    getSearchSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        const data = res.data
        this.searchResult = data
      }
    },
    handleDetail (item) {
      this.$router.push({
        path: `/detail/${item.id}`
      })
    }
  },
  activated () {
    const value = this.$route.query.name
    this.getSearch(value)
  }
}
</script>

<style lang="stylus" scoped>
.wrapper
  .scroll
    top 195px

.shop-list
  .item
    padding-top 24px
    box-sizing border-box
</style>
